<template>
  <div class="handle">
    <div class="title">
      <van-icon name="arrow-left" color="#ffffff" @click="skip_shoppingCart" />
      <van-col>确认订单</van-col>
      <van-icon name="delete-o" color="#ffffff" />
    </div>
    <div class="address">
      <div class="name">
        <span>收货人：张某某</span>
        <span
          >收货地址：浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501
          室</span
        >
      </div>
      <div class="phone">
        <span>13000000000</span>
        <span>
          <i></i>
          <van-icon name="arrow" />
        </span>
      </div>
    </div>
    <!-- 复选框和商品信息 -->
    <div class="center" v-for="(item, index) in list" :key="index">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <div class="collection">
          <!-- 复选按钮 -->
          <!-- <van-checkbox v-model='checked'></van-checkbox> -->
          <van-icon name="success" />
          <!-- 商品信息 -->
          <van-card
            :price="item.price"
            :desc="item.name"
            :thumb="item.showImg"
            id="money"
          />
        </div>
        <!-- 商品数量 -->
        <span class="number">×{{ item.number }}</span>
      </van-checkbox-group>
      <div class="discounts">
        <div class="discountStores">
          <span>{{ taxt1 }}</span>
          <span>{{ taxt3 }}</span>
        </div>
        <div class="parcel">
          <span>{{ taxt2 }}</span>
          <span>
            <i></i>
            <i>{{ taxt4 }}</i>
          </span>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="skip_mallOrders"
    />
    <!-- 密码输入框 -->
    <van-password-input
      :value="value"
      :gutter="10"
      :focused="showKeyboard"
      v-if="showKeyboard"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import { getOrderStateChange } from '../../../api/index.js'
export default {
  data() {
    return {
      result: [],
      value: 1,
      list: [
        {
          showImg:
            "https://img1.baidu.com/it/u=3489579871,1353562328&fm=26&fmt=auto",
          name: "雅阁沙发",
          price: "100.00",
          number: "1",
        },
      ],
      taxt1: "店铺优惠",
      taxt2: "满100元包邮",
      taxt3: "配送方式",
      taxt4: "快递免邮",
      checked: true,
      totalPrice: 0,
      value: '',
      errorInfo: '',
      showKeyboard: false,
    };
  },
  methods: {
    skip_shoppingCart() {
      this.$router.push("/shopping_cart");
    },
    skip_mallOrders() {
      // 提示输入密码
      this.showKeyboard = true
      // this.$router.push("/mall_orders");
    },
    initOrders() {
      let res = window.localStorage.getItem("goodsList");
      let { goods, price } = JSON.parse(res)
      this.list = goods;
      this.totalPrice = price*100
      // console.log(this.totalPrice);
    },
    uploadState() {
      this.list.forEach( async (item, index) => {
        let obj = {
          isPay: 1, 
          userID: window.localStorage.getItem('user_id'), 
          goodsID: item.id
        }
        let res = await getOrderStateChange(obj)
        // console.log(res);
      } )
    }
  },
  created() {
    // console.log(this.checked);
    this.initOrders();
  },
  watch: {
    value: function (newV,oldV) {
      if(newV.length == 6) {
        // 密码长度到6，更新订单状态
        this.uploadState()
        // 跳转至下一页面
        this.$router.push("/mall_orders")
      }
      
    }
  }
};
</script>

<style lang="less" scoped>
.handle {
  width: 100%;
  background-color: #efefef;
  min-height: 1334px;

  .title {
    height: 54px;
    background-color: #ff5555;
    padding: 0;
    padding-top: 16px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .van-icon {
      padding: 10px 20px 0 16px;
      font-size: 42px;
    }
    .van-col {
      font-size: 18px;
      color: #ffffff;
      font-size: 34px;
      line-height: 54px;
    }
  }
  .address {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    padding: 26px 40px;
    background-color: #ffffff;
    div {
      display: flex;
      flex-direction: column;
      font-size: 24px;
    }
    .name span:nth-child(2) {
      margin-top: 26px;
    }
    .phone span:nth-child(2) {
      display: flex;
      justify-content: space-between;
    }
    .van-icon {
      margin-top: 26px;
      text-align: left;
    }
  }
  // 复选框和商品信息
  .center {
    // height: 1144px;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 5px 5px #ddd;
    margin-bottom: 110px;
    .van-checkbox-group {
      height: 190px;
      display: flex;
      justify-content: space-between;
      background-color: #ffffff;
      margin: 20px 21px;
      .collection {
        display: flex;
        // 复选框
        .van-icon {
          padding: 0 20px;
          color: #ff5654;
          // /deep/.van-icon-success {
          //   width: 30px;
          //   height: 30px;
          // }
          // /deep/.van-icon-success::before {
          //   width: 30px;
          //   height: 30px;
          //   position: relative;
          //   top: -5px;
          //   left: -3px;
          // }
          line-height: 190px;
        }
        // 商品
        .van-card {
          background-color: #ffffff;
          margin: 0;
          padding: 26px 0;

          .van-card__header {
            height: 138px;
            .van-card__thumb {
              width: 196px;
              height: 138px;
              margin-right: 20px;
            }

            .van-card__content {
              min-height: 138px;
              justify-content: center;
              align-items: center;
              .van-ellipsis {
                font-size: 24px;
                color: rgba(0, 0, 0, 0.8);
                margin-bottom: 20px;
              }
              .van-card__price-integer {
                font-size: 24px;
              }
            }
          }
        }
      }

      // 商品数量
      .number {
        height: 100%;
        font-size: 20px;
        margin-right: 52px;
        margin-top: 140px;
      }
    }
    .discounts {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      padding: 26px 40px;
      color: #666666;
      div {
        display: flex;
        flex-direction: column;
        font-size: 24px;
      }
      .discountStores span:nth-child(2) {
        margin-top: 26px;
      }
      .parcel span:nth-child(2) {
        margin-top: 26px;
        display: flex;
        justify-content: space-between;
      }
      .van-icon {
        text-align: left;
      }
    }
  }

  // 底部
  .van-submit-bar__bar {
    height: 106px;
    padding: 0;
    .van-submit-bar__price {
      font-size: 26px;
    }
    .van-button {
      width: 220px;
      height: 106px;
      border-radius: 0;
    }
  }

  .van-password-input {
    position: fixed;
    bottom: 488px;
    z-index: 9;
    width: 750px;
    margin: 0;
    box-sizing: border-box;
    background-color: #eee;
    padding: 0 20px;
    padding-top: 30px;
    .van-password-input__item {
      border-radius: 8px;
    }
  }
}
</style>